<template>
  <div>
    <el-form-item label="显示样式">
      <el-radio-group
        v-model="value.showType"
        style="width: 100%"
        @change="changeShowType"
      >
        <el-radio-button label="text">原始值</el-radio-button>
        <el-radio-button label="tag">标签</el-radio-button>
      </el-radio-group>
    </el-form-item>
    <el-form-item label="标签样式" v-if="value.showType === 'tag'">
      <el-radio-group v-model="value.tagStyle" style="width: 100%">
        <el-radio-button label="plain"></el-radio-button>
        <el-radio-button label="dark"></el-radio-button>
        <el-radio-button label="light"></el-radio-button>
      </el-radio-group>
    </el-form-item>
    <div v-if="value.showType === 'tag'">
      <el-form-item label="颜色" class="tr">
        <div class="tag-set">
          <el-color-picker
            v-model="value.tagDefaultColor"
            :predefine="predefineColors"
          ></el-color-picker>
          <i
            class="el-icon-circle-plus-outline iconcolor f20 poi ml5"
            @click="addTag"
          ></i>
        </div>
      </el-form-item>
      <div
        class="ml10"
        v-for="(item, index) in value.tagColorList"
        :key="index"
      >
        <el-form-item
          v-if="item.tagColor !== null"
          class="tr"
          :label="item.optionName"
        >
          <div class="tag-set">
            <el-color-picker
              v-model="item.tagColor"
              :predefine="predefineColors"
            ></el-color-picker>
            <template>
              <el-popconfirm
                title="确定删除该字典值配置吗？"
                @confirm="removeTag(index)"
              >
                <i
                  slot="reference"
                  class="el-icon-delete iconcolor f20 poi ml5"
                ></i>
              </el-popconfirm>
            </template>
          </div>
        </el-form-item>
      </div>
    </div>
  </div>
</template>
<script>
import { PREDEFINE_COLORS } from "@/utils/const";
import tableDicSelectModal from "./addModal";
import { getHmdictionaryOptions } from "@/apis/paas/HmDictionaryController.js";

export default {
  props: ["value"],
  computed: {},
  data() {
    return {
      predefineColors: PREDEFINE_COLORS,
    };
  },
  created() {},
  mounted() {},
  methods: {
    async addTag() {
      let fields = await this.getColorList();
      tableDicSelectModal.init({
        fields,
        onConfirm: ({ fieldCode }) => {
          let arg = fields.filter((i) => fieldCode.indexOf(i.optionValue) > -1);
          arg.forEach((i) => {
            if (i.tagColor === null) {
              i.tagColor = "";
            }
            this.value.tagColorList.push(i);
          });
        },
      });
    },
    removeTag(index) {
      this.value.tagColorList.splice(index, 1);
    },
    async changeShowType(val) {
      if (val !== "text") {
        if (!this.value.tagColorList) {
          this.$set(this.value, "tagColorList", []);
        }
        if (!this.value.tagStyle) {
          this.$set(this.value, "tagStyle", "plain");
        }
      }
    },
    async getColorList() {
      this.value.tagColorList = this.value.tagColorList.filter(
        ({ tagColor }) => tagColor !== null
      );
      const type = JSON.parse(this.value.config).value;
      const data = await getHmdictionaryOptions({ type: type });
      return data.map(({ type, optionName, optionValue }) => {
        return {
          type,
          optionName,
          optionValue,
          tagColor: null,
          disabled: !!this.value.tagColorList.find(
            (i) => i.optionValue === optionValue
          ),
        };
      });
    },
  },
};
</script>

<style scoped lang="scss">
.tag-set {
  display: flex;
  align-items: center;
  justify-content: flex-end;
}
.tag-disabled {
  color: #dcdfe6;
}
</style>
